<!--
=========================================================
* Argon Dashboard - v1.2.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard


* Copyright  Creative Tim (http://www.creative-tim.com)
* Coded by www.creative-tim.com



=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/common :: head_and_imports"></head>

<body>
<!-- Sidenav -->
<nav th:replace="fragments/common :: sidnav(0)"></nav>

<!-- Main content -->
<div class="main-content" id="panel">
	<!-- Topnav -->
	<nav class="navbar navbar-top navbar-expand navbar-dark bg-primary border-bottom d-md-none">
		<div class="container-fluid">
			<div class="collapse navbar-collapse row justify-content-between" id="navbarSupportedContent">
				<div class="row col-auto justify-content-end align-items-center m-0">
					<!-- Navbar links -->
					<div class="col-auto">
						<ul class="navbar-nav align-items-center">
							<li class="nav-item d-xl-none">
								<!-- Sidenav toggler -->
								<div class="pr-2 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin"
								     data-target="#sidenav-main">
									<div class="sidenav-toggler-inner">
										<i class="sidenav-toggler-line"></i>
										<i class="sidenav-toggler-line"></i>
										<i class="sidenav-toggler-line"></i>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</nav>
	
	<!-- Header -->
	<div class="header bg-primary pb-6">
		<div class="container-fluid">
			<div class="container-fluid d-flex align-items-center">
				<div class="row">
					<div class="col-lg-7 col-md-10 mt-5">
						<h1 class="display-2 text-white">Basic information</h1>
						<p class="text-white text-justify mb-3">
							Here is the basic information of your project
							<code th:text="${currentProjectIdentifier.split('#')[0]}"></code>,
							including the number of modules, packages, classes, methods and fields. There are two
							statistical measurements for classes: class file and declared class.
							The class file represents the .java files in your project.
							The declared class is classified as a public outer class, a package-private outer class or a
							<a class="text-yellow text-link"
							   href="https://docs.oracle.com/javase/tutorial/java/javaOO/nested.html"> nested class</a>,
							with six types: class, enum, abstract class, interface, annotation, and package/module-info file.
						</p>
					</div>
				</div>
			</div>
			<!-- Header container -->
			<div class="header-body">
				<!-- Card stats -->
				<div class="row pt-3">
					<!-- Module Card -->
					<div class="col-xl-4 col-md-4">
						<div class="card card-stats">
							<!-- Card body -->
							<div class="card-body">
								<!-- Current Info -->
								<div class="row">
									<div class="col">
										<h5 class="card-title text-uppercase text-muted mb-0">Number Of Modules</h5>
										<span class="h2 font-weight-bold mb-0" th:text="${currentProjectInfo.getModuleList().size()}">
										</span>
									</div>
								</div>
								<!-- Update Info -->
								<p class="mt-3 mb-0 text-sm" th:inline="text"
								   th:with="numDiff=${currentProjectInfo.getModuleList().size() - preProjectInfo.getModuleList().size()}">
									<span class="text-success mr-2" th:if="${numDiff} ge '0'">
										<i class="fa fa-arrow-up"></i>[[${numDiff}]]
									</span>
									<span class="text-danger mr-2" th:if="${numDiff} lt '0'">
										<i class="fa fa-arrow-down"></i>[[${numDiff}]]
									</span>
									<span class="text-nowrap">
										Since [[${#dates.format(preProjectInfo.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}]]
									</span>
								</p>
							</div>
						</div>
					</div>
					<!-- Package Card -->
					<div class="col-xl-4 col-md-4">
						<div class="card card-stats">
							<!-- Card body -->
							<div class="card-body">
								<!-- Current Info -->
								<div class="row">
									<div class="col">
										<h5 class="card-title text-uppercase text-muted mb-0">Number Of Packages</h5>
										<span class="h2 font-weight-bold mb-0"
										      th:text="${currentProjectInfo.getPackageList().size()}"></span>
									</div>
								</div>
								<!-- Update Info -->
								<p class="mt-3 mb-0 text-sm" th:inline="text"
								   th:with="numDiff=${currentProjectInfo.getPackageList().size() - preProjectInfo.getPackageList().size()}">
									<span class="text-success mr-2" th:if="${numDiff} ge '0'">
										<i class="fa fa-arrow-up"></i>[[${numDiff}]]
									</span>
									<span class="text-danger mr-2" th:if="${numDiff} lt '0'">
										<i class="fa fa-arrow-down"></i>[[${numDiff}]]
									</span>
									<span class="text-nowrap">
										Since [[${#dates.format(preProjectInfo.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}]]
									</span>
								</p>
							</div>
						</div>
					</div>
					<!-- Class Card -->
					<div class="col-xl-4 col-md-4">
						<div class="card card-stats">
							<!-- Card body -->
							<div class="card-body">
								<!-- Current Info -->
								<div class="row">
									<div class="col">
										<h5 class="card-title text-uppercase text-muted mb-0">Number Of Java Files / Declared
										                                                      Classes</h5>
										<span class="h2 font-weight-bold mb-0"
										      th:text="${currentProjectInfo.getClassList().size()} +' / '+ ${currentProjectInfo.getAllClassList().size()} "></span>
									</div>
								</div>
								<!-- Update Info -->
								<p class="mt-3 mb-0 text-sm" th:inline="text"
								   th:with="numDiff=${currentProjectInfo.getClassList().size() - preProjectInfo.getClassList().size()}, numDiff2=${currentProjectInfo.getAllClassList().size() - preProjectInfo.getAllClassList().size()}">
									<span class="text-success mr-0" th:if="${numDiff} ge '0'">
										<i class="fa fa-arrow-up"></i>[[${numDiff}]]
									</span>
									<span class="text-danger mr-0" th:if="${numDiff} lt '0'">
										<i class="fa fa-arrow-down"></i>[[${numDiff}]]
									</span>
									<span>&nbsp;/&nbsp;</span>
									<span class="text-success ml-0" th:if="${numDiff2} ge '0'">
										<i class="fa fa-arrow-up"></i>[[${numDiff2}]]
									</span>
									<span class="text-danger ml-0" th:if="${numDiff2} lt '0'">
										<i class="fa fa-arrow-down"></i>[[${numDiff2}]]
									</span>
									<span class="text-nowrap ml-2">
										Since [[${#dates.format(preProjectInfo.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}]]
									</span>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Page content -->
	<div class="container-fluid mt--6">
		<div class="row">
			<!-- chart -->
			<div class="col-xl-12">
				<div class="card">
					<div class="card-header bg-transparent">
						<div class="row align-items-center">
							<div class="col">
								<h6 class="text-muted text-uppercase ls-1 mb-1">Overview</h6>
								<h5 class="h3 mb-0">Trends in the number of modules, packages, and classes</h5>
							</div>
							<div class="col">
								<ul class="nav nav-pills justify-content-end">
									<li class="nav-item mr-2 mr-md-0">
										<a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"
										   onclick="changeXAxisType('category')">
											<span class="d-none d-md-block">Category</span>
											<span class="d-md-none">C</span>
										</a>
									</li>
									<li class="nav-item">
										<a href="#" class="nav-link py-2 px-3" data-toggle="tab" onclick="changeXAxisType('time')">
											<span class="d-none d-md-block">Time</span>
											<span class="d-md-none">T</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="chart" class="card-body pb-4 px-5 pt-0 col-12" style="height:500px;">
					</div>
					<script type="text/javascript" th:inline="javascript">
              // 指定图表的配置项和数据
              var option = {
                  dataset: {
                      // 提供一份数据。
                      source: [
                          ['level'].concat(/*[[${timeRecords}]]*/),
                          ['Number of Modules'].concat(/*[[${moduleRecords}]]*/),
                          ['Number of Packages'].concat(/*[[${packageRecords}]]*/),
                          ['Number of Java Files'].concat(/*[[${javaFileRecords}]]*/),
                          ['Number of Outer Classes'].concat(/*[[${classRecords}]]*/),
                          ['Number of Outer and Nested classes'].concat(/*[[${allClassRecords}]]*/),
                      ]
                  },
                  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                  series: [
                      {type: 'line', encode: {x: 0, y: 1, seriesName: 1}, seriesLayoutBy: 'row'},
                      {type: 'line', encode: {x: 0, y: 2, seriesName: 2}, seriesLayoutBy: 'row'},
                      {type: 'line', encode: {x: 0, y: 3, seriesName: 3}, seriesLayoutBy: 'row'},
                      {type: 'line', encode: {x: 0, y: 4, seriesName: 4}, seriesLayoutBy: 'row'},
                      {type: 'line', encode: {x: 0, y: 5, seriesName: 5}, seriesLayoutBy: 'row'},
                  ],
                  legend: {},
                  grid: {
                      bottom: '100'
                  },
                  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                  xAxis: {
                      type: 'category', splitLine: {show: true},
                      axisLabel: {
                          formatter: function (value, index) {
                              return value.split(" ")[0];
                          }
                      }
                  },
                  yAxis: {},
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          snap: true,
                          type: "line",
                      }
                  },
                  dataZoom: [
                      {
                          type: 'slider',
                          xAxisIndex: 0,
                          start: 0,
                          end: 100
                      },
                      {
                          type: 'inside',
                          xAxisIndex: 0,
                          start: 0,
                          end: 100
                      },
                      {
                          type: 'slider',
                          yAxisIndex: 0,
                          start: 0,
                          end: 100
                      }
                  ],
              };
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('chart'));
              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);

              myChart.on('click', function (params) {
                  // 控制台打印数据的名称
                  console.log(params.name);
              });

              function changeXAxisType(type) {
                  myChart.setOption({
                      xAxis: {
                          type: type
                      },
                  });
              }
					
					</script>
				</div>
			</div>
		</div>
		
		<div class="row">
			<!-- 选择记录时间 -->
			<div class="col-xl-12">
				<div class="card-header border-0">
					<div class="row align-items-center">
						<div class="col-auto">
							<h6 class="text-uppercase text-muted ls-1 mb0">Details</h6>
							<!-- dropdown -->
							<div class="nav-item dropdown">
								<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
								   aria-expanded="false">
											<span class="h3 mb-0 mr-2" id="current_record_time"
											      th:text="${#dates.format(currentProjectInfo.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}"></span>
									<i class="fas fa-caret-down"></i>
								</a>
								<div class="dropdown-menu">
									<a th:class="${timeRecordStat.index} eq ${timeRecords.size()-1} ? 'dropdown-item active' : 'dropdown-item'"
									   href="javascript:void(0);"
									   th:each="timeRecord,timeRecordStat : ${timeRecords}"
									   th:onclick="selectRecordTime(this,[[${timeRecordStat.index}]])">
										<span th:text="${timeRecord}"></span>
									</a>
								</div>
							</div>
						</div>
						<div class="col">
							<ul class="nav nav-pills justify-content-end">
								<li class="nav-item mr-2 mr-md-0">
									<a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"
									   onclick="showModuleBasic()">
										<span class="d-none d-md-block">Module</span>
										<span class="d-md-none">M</span>
									</a>
								</li>
								<li class="nav-item">
									<a href="#" class="nav-link py-2 px-3" data-toggle="tab" onclick="showPackageBasic()">
										<span class="d-none d-md-block">Package</span>
										<span class="d-md-none">P</span>
									</a>
								</li>
								<li class="nav-item">
									<a href="#" class="nav-link py-2 px-3" data-toggle="tab" onclick="showClassBasic()">
										<span class="d-none d-md-block">Class</span>
										<span class="d-md-none">C</span>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!--表格-->
			<div class="col-xl-12">
				<div class="card table-outline">
					<div class="table-responsive">
						<div id="toolbar">
							<div class="form-inline" role="form">
								<a id="previous-btn" class="btn btn-outline-primary btn-sm invisible"
								   href="javascript:void(0);"
								   onclick="showClassCohesion()">
									< previous</a>
							</div>
						</div>
						<table id="table"></table>
					</div>
				</div>
			</div>
		</div>
		<!--common modals-->
		<modal th:replace="fragments/common :: modals"></modal>
		<!-- Footer -->
		<footer th:replace="fragments/common :: footer"></footer>
	</div>

</div>
<script th:replace="fragments/common :: footer_imports"></script>
<script>

    let tableFlag = "module";

    $(function () {
        // 首次渲染表格
        showModuleBasic();
        // showPackageBasic();
        // showClassBasic();
    })

    let projectRecordIndex = -1;

    // 选择记录
    function selectRecordTime(obj, index) {
        projectRecordIndex = index;
        let newTime = $(obj).text()
        $('#current_record_time').text(newTime)
        $(obj).siblings().removeClass("active")
        $(obj).addClass("active");
        if (tableFlag === "module") {
            showModuleBasic();
        } else if (tableFlag === "package") {
            showPackageBasic();
        } else {
            showClassBasic();
        }
    }

    //表格：类级别的度量数据
    function showModuleBasic() {
        tableFlag = "module"
        let columns = [{
            field: 'name', title: 'Module Name', sortable: true
        }, {
            field: 'packageNum', title: 'Number of Packages', sortable: true
        }, {
            field: 'classNum', title: 'Number of Java Files / Declared Classes', sortable: true
        }];
        $.get("/dashboard/basic/table/module?projectRecordIndex=" + projectRecordIndex).done(function (data) {
            buildTable($('#table'), data, columns, 0, 0, 500)
            $("#previous-btn").addClass("invisible");
        });
    }

    //表格：类级别的度量数据
    function showPackageBasic() {
        tableFlag = "package"
        let columns = [{
            field: 'name', title: 'Package Name', sortable: true
        }, {
            field: 'classNum', title: 'Number of Java Files / Declared Classes', sortable: true
        }, {
            field: 'module', title: 'of Which Module', sortable: true
        }];
        $.get("/dashboard/basic/table/package?projectRecordIndex=" + projectRecordIndex).done(function (data) {
            buildTable($('#table'), data, columns, 1, 0, 500)
            $("#previous-btn").addClass("invisible");
        });
    }

    //表格：类级别的度量数据
    function showClassBasic() {
        tableFlag = "class"
        let columns = [{
            field: 'name', title: 'Class Name', sortable: true
        }, {
            field: 'fieldNum', title: 'Fields', sortable: true
        }, {
            field: 'methodNum', title: 'Methods', sortable: true
        }, {
            field: 'enumConstantsNum', title: 'Enum Constants', sortable: true
        }, {
            field: 'annotationMembers', title: 'Annotation Members', sortable: true
        }, {
            field: 'type', title: 'Class Type', sortable: true
        }, {
            field: 'declaration', title: 'Class Location', sortable: true
        }, {
            field: 'package', title: 'of Which Package', sortable: true
        }, {
            field: 'module', title: 'of Which Module', sortable: true
        }];
        $.get("/dashboard/basic/table/class?projectRecordIndex=" + projectRecordIndex).done(function (data) {
            buildTable($('#table'), data, columns, 1, 0, 500)
            $("#previous-btn").addClass("invisible");
        });
    }

    // 重新渲染表格
    function buildTable($el, dataset, columns, fixedNumber, fixedRightNumber, height) {
        $el.bootstrapTable('destroy').bootstrapTable({
            height: height,
            columns: columns,
            data: dataset,
            toolbar: '#toolbar',
            search: true,
            showColumns: true,
            fixedColumns: true,
            fixedNumber: fixedNumber,
            fixedRightNumber: fixedRightNumber,
            // buttons: "",
            // buttonsPrefix: "",
            // buttonsClass: "btn btn-sm btn-outline-primary",
            showColumnsToggleAll: true,
            detailViewByClick: true,
            iconSize: "sm",
            showFullscreen: true,
        })
    }
</script>
</body>

</html>
